// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html

import { AudioManager } from "./util/AudioManager";
import { Config } from "./util/Config";
import { LocalStorageManager } from "./util/LocalStorageManager";
import { Tools } from "./util/Tools";



const { ccclass, property } = cc._decorator;

@ccclass
export default class MenuLayoutController extends cc.Component {

    @property(cc.Node)
    sideBg: cc.Node = null;  //背景
    @property(cc.Node)
    sideBtnMenu: cc.Node = null;  //菜单按钮
    @property(cc.Node)
    sideBtnInfo: cc.Node = null; //游戏介绍按钮
    @property(cc.Node)
    sideBtnSoundOnLayout: cc.Node = null; //音效按钮 父布局
    @property(cc.Node)
    sideBtnSoundOn: cc.Node = null; //音效按钮
    @property(cc.Node)
    sideBtnSoundOff: cc.Node = null; //音效按钮
    @property(cc.Node)
    sideBtnMusicOnLayout: cc.Node = null; //音乐按钮 父布局
    @property(cc.Node)
    sideBtnMusicOn: cc.Node = null; //音乐按钮
    @property(cc.Node)
    sideBtnMusicOff: cc.Node = null; //音乐按钮
    @property(cc.Node)
    btnopen: cc.Node = null; 

    // 全屏点击遮罩，用于点击屏幕任意位置关闭设置面板
    private clickMask: cc.Node = null;



    sideBtnMenuPosion: cc.Vec3 = null
    sideBtnInfoPosion: cc.Vec3 = null
    sideBtnSoundOnPosion: cc.Vec3 = null
    sideBtnMusicOnPosion: cc.Vec3 = null

    isExpand = false //是否是展开
    isLock = false //是否是锁定

    infoClick: Function

    music: boolean = true;
    sound: boolean = true;

    onLoad() {
        // 初始化点击遮罩
        this.initClickMask();

    }
    protected onEnable(): void {
        this.music = LocalStorageManager.GetInstance().getMusicSwitch();
        this.sound = LocalStorageManager.GetInstance().getSoundSwitch();
        this.setMusicSwitch(this.music);
        this.setSoundSwitch(this.sound);

        // 断线重连/页面恢复时，强制重置到“收起”状态，避免按钮叠在一起、背景未隐藏
        this.collapseImmediately();
    }

    start() {
        this.sideBtnMenuPosion = this.sideBtnMenu.position
        this.sideBtnInfoPosion = this.sideBtnInfo.position
        this.sideBtnSoundOnPosion = this.sideBtnSoundOnLayout.position
        this.sideBtnMusicOnPosion = this.sideBtnMusicOnLayout.position


        Tools.imageButtonClick(this.sideBtnMenu, Config.buttonRes + 'side_btn_menu_normal', Config.buttonRes + 'side_btn_menu_pressed', () => {
            if (this.isLock) {
                return
            }
            this.isLock = true
            if (this.isExpand) {
                this.input(() => {
                    this.isExpand = false // 收起后设置为false
                    this.isLock = false
                })
            } else {
                this.output(() => {
                    this.isExpand = true // 展开后设置为true
                    this.isLock = false
                })
            }

        })

        Tools.imageButtonClick(this.sideBtnInfo, Config.buttonRes + 'side_btn_info_normal', Config.buttonRes + 'side_btn_info_pressed', () => {
            if (this.isLock) {
                return
            }
            this.isLock = true
            this.input(() => {
                this.isExpand = false // 收起后设置为false
                this.isLock = false
            })
            if (this.infoClick) {
                this.infoClick()
            }
        })

        Tools.imageButtonClick(this.sideBtnSoundOn, Config.buttonRes + 'side_btn_sound_on_normal', Config.buttonRes + 'side_btn_sound_on_pressed', () => {
            this.sound = !this.sound;
            LocalStorageManager.GetInstance().setSoundSwitch(this.sound);
            this.setSoundSwitch(this.sound);
        })
        Tools.imageButtonClick(this.sideBtnSoundOff, Config.buttonRes + 'side_btn_sound_off_normal', Config.buttonRes + 'side_btn_sound_off_pressed', () => {
            this.sound = !this.sound;
            LocalStorageManager.GetInstance().setSoundSwitch(this.sound);
            this.setSoundSwitch(this.sound);
        })
        Tools.imageButtonClick(this.sideBtnMusicOn, Config.buttonRes + 'side_btn_music_on_normal', Config.buttonRes + 'side_btn_music_on_pressed', () => {
            this.music = !this.music;
            LocalStorageManager.GetInstance().setMusicSwitch(this.music);
            this.setMusicSwitch(this.music);
        })
        Tools.imageButtonClick(this.sideBtnMusicOff, Config.buttonRes + 'side_btn_music_off_normal', Config.buttonRes + 'side_btn_music_off_pressed', () => {
            this.music = !this.music;
            LocalStorageManager.GetInstance().setMusicSwitch(this.music);
            this.setMusicSwitch(this.music);
        })

    }

    /**
     * 立即收起：停止一切补间，重置所有节点位置/可见性/透明度与背景
     * 用于断线重连、场景恢复时保证UI为收起状态
     */
    public collapseImmediately(): void {
        // 停止补间，避免状态叠加
        this.stopAllMenuTweens();

        // 重置功能面板按钮布局到初始位置与不可见
        if (this.sideBtnInfo) {
            if (this.sideBtnInfoPosion) {
                this.sideBtnInfo.position = new cc.Vec3(this.sideBtnInfoPosion.x, this.sideBtnInfoPosion.y, 0);
            }
            this.sideBtnInfo.opacity = 0;
            this.sideBtnInfo.active = false;
        }
        if (this.sideBtnSoundOnLayout) {
            if (this.sideBtnSoundOnPosion) {
                this.sideBtnSoundOnLayout.position = new cc.Vec3(this.sideBtnSoundOnPosion.x, this.sideBtnSoundOnPosion.y, 0);
            }
            this.sideBtnSoundOnLayout.opacity = 0;
            this.sideBtnSoundOnLayout.active = false;
        }
        if (this.sideBtnMusicOnLayout) {
            if (this.sideBtnMusicOnPosion) {
                this.sideBtnMusicOnLayout.position = new cc.Vec3(this.sideBtnMusicOnPosion.x, this.sideBtnMusicOnPosion.y, 0);
            }
            this.sideBtnMusicOnLayout.opacity = 0;
            this.sideBtnMusicOnLayout.active = false;
        }

        // 背景重置与隐藏
        if (this.sideBg) {
            this.sideBg.anchorY = 1;
            this.sideBg.height = 76;
            this.sideBg.opacity = 0;
            this.sideBg.active = false;
        }

        // 关闭点击遮罩
        this.disableClickMask();

        // 重置状态机
        this.isExpand = false;
        this.isLock = false;
    }

    /**
     * 停止所有相关节点的补间，避免补间叠加导致的错乱
     */
    private stopAllMenuTweens(): void {
        if (this.sideBtnInfo) cc.Tween.stopAllByTarget(this.sideBtnInfo);
        if (this.sideBtnSoundOnLayout) cc.Tween.stopAllByTarget(this.sideBtnSoundOnLayout);
        if (this.sideBtnMusicOnLayout) cc.Tween.stopAllByTarget(this.sideBtnMusicOnLayout);
        if (this.sideBg) cc.Tween.stopAllByTarget(this.sideBg);
    }

    setMusicSwitch(switchType: boolean) {
        if (switchType) {
            this.sideBtnMusicOn.active = true;
            this.sideBtnMusicOff.active = false;
        } else {
            this.sideBtnMusicOn.active = false;
            this.sideBtnMusicOff.active = true;
        }

        if (this.music) {
            AudioManager.playBgm();
        } else {
            AudioManager.stopBgm();
        }

    }
    setSoundSwitch(switchType: boolean) {
        if (switchType) {
            this.sideBtnSoundOn.active = true;
            this.sideBtnSoundOff.active = false;
        } else {
            this.sideBtnSoundOn.active = false;
            this.sideBtnSoundOff.active = true;
        }

    }

    setClick(infoClick: Function) {
        this.infoClick = infoClick
    }

    //展开
    output(callbacks: Function) {
        cc.tween(this.sideBtnInfo)
            .call(() => {
                this.sideBtnInfo.active = true;
            })
            .to(0.2, {
                position: new cc.Vec3(this.sideBtnInfoPosion.x, this.sideBtnInfoPosion.y - 64, 0),
                opacity: 255
            }, { easing: 'quadIn' }) // 可用 'sineInOut', 'cubicOut' 等
            .start();

        cc.tween(this.sideBtnSoundOnLayout)
            .call(() => {
                this.sideBtnSoundOnLayout.active = true;
            })
            .to(0.2, {
                position: new cc.Vec3(this.sideBtnSoundOnPosion.x, this.sideBtnSoundOnPosion.y - 128, 0),
                opacity: 255
            }, { easing: 'quadIn' }) // 可用 'sineInOut', 'cubicOut' 等
            .start();

        cc.tween(this.sideBtnMusicOnLayout)
            .call(() => {
                this.sideBtnMusicOnLayout.active = true;
            })
            .to(0.2, {
                position: new cc.Vec3(this.sideBtnMusicOnPosion.x, this.sideBtnMusicOnPosion.y - 192, 0),
                opacity: 255
            }, { easing: 'quadIn' }) // 可用 'sineInOut', 'cubicOut' 等
            .start();
        this.sideBg.anchorY = 1;
        cc.tween(this.sideBg)
            .call(() => {
                this.sideBg.active = true;
            })
            .to(0.2, { height: 268, opacity: 255 }, { easing: 'quadIn' })
            .call(() => {
                callbacks()
            })
            .start();
            this.enableClickMask()
    }
    //收起
    input(callbacks: Function) {
        cc.tween(this.sideBtnInfo)
            .to(0.2, {
                position: new cc.Vec3(this.sideBtnInfoPosion.x, this.sideBtnInfoPosion.y, 0),
                opacity: 0
            }, { easing: 'quadIn' }) // 可用 'sineInOut', 'cubicOut' 等
            .call(() => {
                this.sideBtnInfo.active = false;
            })
            .start();

        cc.tween(this.sideBtnSoundOnLayout)
            .to(0.2, {
                position: new cc.Vec3(this.sideBtnSoundOnPosion.x, this.sideBtnSoundOnPosion.y, 0),
                opacity: 0
            }, { easing: 'quadIn' }) // 可用 'sineInOut', 'cubicOut' 等
            .call(() => {
                this.sideBtnSoundOnLayout.active = false;
            })
            .start();

        cc.tween(this.sideBtnMusicOnLayout)
            .to(0.2, {
                position: new cc.Vec3(this.sideBtnMusicOnPosion.x, this.sideBtnMusicOnPosion.y, 0),
                opacity: 0
            }, { easing: 'quadIn' }) // 可用 'sineInOut', 'cubicOut' 等
            .call(() => {
                this.sideBtnMusicOnLayout.active = false;
            })
            .start();

        this.sideBg.anchorY = 1;
        cc.tween(this.sideBg)
            .to(0.2, { height: 76, opacity: 0 }, { easing: 'quadIn' })
            .call(() => {
                this.sideBg.active = false;
                // 收起后禁用遮罩，防止遮罩残留导致点击穿透或叠层
                this.disableClickMask();
                callbacks()
            })
            .start();
    }

    protected onDisable(): void {
        // 组件关闭时停止补间，避免回到前台或重连后补间继续执行造成叠加
        this.stopAllMenuTweens();
    }
    /**
     * 初始化点击遮罩
     */
    private initClickMask() {
        // 创建一个全屏的透明遮罩节点
        this.clickMask = this.btnopen;

    

        // 添加Button组件，确保能接收点击事件
        const button = this.clickMask.addComponent(cc.Button);
        button.transition = cc.Button.Transition.NONE; // 不要视觉过渡效果

        // 添加点击事件监听
        button.node.on('click', this.onClickMaskClick, this);
        
        // 默认禁用
        this.clickMask.active = false;
    }

    /**
     * 启用点击遮罩
     */
    private enableClickMask() {
        if (this.clickMask) {
            this.clickMask.active = true;
            
        }
    }

    /**
     * 禁用点击遮罩
     */
    private disableClickMask() {
        if (this.clickMask) {
            this.clickMask.active = false;
          
        }
    }

    /**
     * 点击遮罩的处理函数
     */
    private onClickMaskClick() {
       this.input(()=>{
            this.disableClickMask();
            this.isLock = false; // 重置锁定状态，允许再次点击按钮
            this.isExpand = false; // 重置展开状态
       })
    }

    onDestroy() {
        // 清理点击遮罩
        if (this.clickMask && this.clickMask.isValid) {
            this.clickMask.off('click', this.onClickMaskClick, this);
            this.clickMask.removeFromParent();
            this.clickMask = null;
        }
    }

    // update (dt) {}
}